<template>
  <div class="alarmBox">
    <div class="above-table">
      <div class="alarmHeader">
        <div class="filterContent">
          <div id="aboveFilter" class="filter">
            <el-date-picker
              v-model="listQuery.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              class="picker-time"
            />
          </div>
          <div class="filter">
            <el-select v-model="listQuery.equipmentNumber" class="filter-item item-input" placeholder="设备编号" @change="handleFilter">
              <el-option v-for="item in equipmentNumberOptions" :key="item.key" :label="item.label" :value="item.key" />
            </el-select>
          </div>
          <!--                  <el-select v-model="listQuery.region" class="filter-item item-input" placeholder="区域" clearable @change="handleFilter">
                    <el-option v-for="item in regionOptions" :key="item.key" :label="item.label" :value="item.key" />
                  </el-select>
                  <el-select v-model="listQuery.pipeline" class="filter-item item-input" placeholder="管线" clearable @change="handleFilter">
                    <el-option v-for="item in pipelineOptions" :key="item.key" :label="item.label" :value="item.key" />
                  </el-select>-->
        </div>
        <div>
          <div class="filterContentNumberBox">
            <div class="filterContentNumber">
              <div class="filterNumber">
                <div class="filterNumberContext">请输入i1阈值:</div>
                <div><el-input v-model="i1Limit" placeholder="请输入i1阈值" @keyup.enter.native="handleFilter" /></div>
              </div>
            </div>
            <div class="filterContentNumber">
              <div class="filterNumber">
                <div class="filterNumberContext">请输入i2阈值:</div>
                <div><el-input v-model="i2Limit" placeholder="请输入i2阈值" @keyup.enter.native="handleFilter" /></div>
              </div>
            </div>
            <div class="filterContentNumber">
              <div class="filterNumber">
                <div class="filterNumberContext">请输入i3阈值:</div>
                <div><el-input v-model="i3Limit" placeholder="请输入i3阈值" @keyup.enter.native="handleFilter" /></div>
              </div>
            </div>
            <div class="filterContentNumber">
              <div class="filterNumber">
                <div class="filterNumberContext">请输入i4阈值:</div>
                <div><el-input v-model="i4Limit" placeholder="请输入i4阈值" @keyup.enter.native="handleFilter" /></div>
              </div>
            </div>
          </div>
          <div id="footerButton">
            <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
              查询
            </el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" style="margin-left: 20px;" @click="handleDownload">
              导出
            </el-button>
            <span style="margin-left: 50px;">总数：{{ total }}条
            </span>
          </div>
        </div>
      </div>
      <div class="alarmBody">
        <el-table
          ref="filterTable"
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          height="35em"
        >
          <el-table-column
            label="报警时间"
            min-width="70px"
            align="center"
            prop="alarmTime"
            sortable
            column-key="alarmTime"
            :default-sort="{prop: 'alarmTime', order: 'descending'}"
          >
            <template slot-scope="{row}">
              <span>{{ row.alarmTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警设备" min-width="60" align="center">
            <template slot-scope="{row}">
              <span>{{ row.equipmentNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警地点" min-width="50px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.place }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属站点" min-width="40px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.site }}</span>
            </template>
          </el-table-column>
          <el-table-column label="保护测电压" min-width="40px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="未保护侧电压" min-width="50" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i2 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="南北地电位梯度" min-width="40" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i3 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="东西地电位梯度" min-width="40" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i4 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="管理单位" min-width="40px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.management }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--    <div class="alarmFooter">-->
    <!--      <div class="typeBarChart">-->
    <!--        <scroll-board />-->
    <!--        &lt;!&ndash;        <typeBarChart :id="alarmChart"/>&ndash;&gt;-->
    <!--      </div>-->
    <!--    </div>-->
    <!--   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.amount" style="margin-left: 250px; margin-top: 30px" @pagination="getList" />-->
  </div>

</template>

<script>
import { fetchOptions } from '@/api/dataTable'
import { fetchList } from '@/api/alarmEvents'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
// import scrollBoard from '@/views/alarmEvents/components/scrollBoard'
// import typeBarChart from './components/TypeBarChart.vue'
// import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  // components: { scrollBoard },
  // components: { typeBarChart },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      alarmChart: 'alarmChart',
      // 日期选择器
      pickerOptions: {
        disabledDate: time => {
          var isSelected = false
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            isSelected = time.getTime() <= minTime || time.getTime() > maxTime
          }
          return isSelected || time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: [{
          text: '最近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近12小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      flag: false,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      i1Limit: '',
      i2Limit: '',
      i3Limit: '',
      i4Limit: '',
      listQuery: {
        equipmentNumber: 'bd16265282985790001',
        date: null,
        region: null,
        pipeline: null,
        dataLimit: [null, null, null, null]
      },
      temp: {
        alarmTime: '',
        equipmentNumber: '',
        place: '',
        site: '',
        i1: '',
        i2: '',
        i3: '',
        i4: ''
      },
      dateString: '',
      downloadLoading: false,
      regionOptions: '',
      siteOptions: '',
      pipelineOptions: '',
      equipmentNumberOptions: ''
    }
  },
  created() {
    this.getList()
    this.getAllOptions()
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    getList() {
      this.listLoading = false
      this.dateString = this.listQuery.date
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })

      this.flag = true
    },
    handleFilter() {
      this.listQuery.dataLimit = [this.i1Limit, this.i2Limit, this.i3Limit, this.i4Limit]
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['alarmTime', 'equipmentNumber', 'place', 'site', 'i1', 'i2', 'i3', 'i4']
        const filterVal = ['alarmTime', 'equipmentNumber', 'place', 'site', 'info', 'i1', 'i2', 'i3', 'i4']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if ((j === 'additionTime') || (j === 'patrolInspectionTime') || (j === 'onlineTime')) {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getAllOptions() {
      fetchOptions().then(response => {
        this.equipmentNumberOptions = response.data.equipmentNumberOptions
        this.regionOptions = response.data.regionOptions
        this.siteOptions = response.data.siteOptions
        this.pipelineOptions = response.data.pipelineOptions
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style scoped>
.alarmBox {
  font-size: 100%;
  display: flex;
  flex-direction: column;
}
.alarmHeader {
  flex: 1;
  margin: 20px;
}
.alarmBody {
  flex: 2;
  margin: 20px 60px 20px 20px;
}
.alarmFooter {
  margin:  20px;
}
.filterContent {
  display: flex;
  flex-direction: column;
}
filterContentNumberBox {
  display: flex;
}
.filterNumber {
  display: flex;
}
.filterContentNumber {
  margin: 35px 20px 20px;
}
.filterNumberContext {
  margin-top: 10px;
  margin-right: 10px;
}
.item-input{
  width: 300px;
  margin-left: 20px;
  margin-top: 10px;
}
.picker-time{
  width: 19em;
  margin-left: 20px;
  margin-top: 10px;
}
.above-table {
  display: flex;
  flex-direction: row;
  height: 500px;
}
.filter {
  margin-top: 10px;
}
#aboveFilter {
  margin-top: 20px;
}
#footerButton {
  padding-top: 30px;
}
</style>
